<template>
  <!-- <h1>制作中……</h1> -->
  <div class="root-container" v-loading="isLoading">
    <div class="query-container">
      <el-form inline size="small">
        <el-form-item>
          <el-date-picker
            v-model="dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="起始日期"
            end-placeholder="结束日期"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleQuery">
            <el-icon><Search /></el-icon>
            <span>查询</span>
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="timeline-container">
      <el-timeline>
        <el-timeline-item
          v-for="(dayContent, date, index) in timelineData"
          :timestamp="date"
          placement="top"
          icon="Calendar"
        >
          <!-- <el-card> -->
          <el-table :data="dayContent.records" style="width: 100%">
            <el-table-column label="机场" min-width="100px">
              <template #default="scope">
                <span>{{ scope.row.airport.toUpperCase() }}</span>
              </template>
            </el-table-column>

            <el-table-column label="程序" min-width="100px">
              <template #default="scope">
                <span>{{ scope.row.operation.toUpperCase() }}</span>
              </template>
            </el-table-column>

            <el-table-column label="开始时间" min-width="200px">
              <template #default="scope">
                <span>{{ scope.row.startTime }}</span>
              </template>
            </el-table-column>

            <el-table-column label="结束时间" min-width="200px">
              <template #default="scope">
                <span>{{ scope.row.endTime }}</span>
              </template>
            </el-table-column>

            <el-table-column label="时长" min-width="100px">
              <template #default="scope">
                <span
                  >{{
                    dayjs(scope.row.endTime)
                      .diff(scope.row.startTime, "hour", true)
                      .toFixed(1)
                  }}小时</span
                >
              </template>
            </el-table-column>
            <el-table-column min-width="100px">
              <template #default="scope">
                <el-button type="primary" link @click="handleEdit(scope.row)"
                  >修改</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <!-- </el-card> -->
        </el-timeline-item>
      </el-timeline>
    </div>
    <el-dialog
      v-model="showEditor"
      title="编辑记录"
      width="360"
      draggable
      :show-close="false"
    >
      <el-form v-if="editedItem" size="small">
        <el-form-item label="开始时间">
          <el-time-picker
            v-model="editedItem.startTime"
            value-format="YYYY-MM-DD HH:mm:ss"
            format="HH:mm:ss"
            :clearable="false"
          />
        </el-form-item>
        <el-form-item label="结束时间">
          <el-time-picker
            v-model="editedItem.endTime"
            value-format="YYYY-MM-DD HH:mm:ss"
            format="HH:mm:ss"
            :clearable="false"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="saveEdit()">保存</el-button>
          <el-button type="primary" link @click="cancelEdit()">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed, h, onMounted } from "vue";
import dayjs from "dayjs";
import { ElMessage, ElMessageBox, ElNotification } from "element-plus";
import axios from "axios";

const dateRange = ref([new Date(), new Date()]);
const responseData = ref(null);
const timelineData = ref({});
const handleQuery = () => {
  let startTime = dayjs(dateRange.value[0]).format("YYYY-MM-DD") + " 00:00:00";
  let endTime =
    dayjs(dateRange.value[1]).add(1, "day").format("YYYY-MM-DD") + " 00:00:00";
  axios
    .post("api/journal_cxo.php?method=get", {
      method: "get",
      startTime,
      endTime,
    })
    .then((response) => {
      // console.log(response.data);
      responseData.value = response.data;
      if (response.data.status) {
        const result = {};
        response.data.content.forEach((item) => {
          let day = dayjs(item.startTime);
          let date = day.format("YYYY-MM-DD");
          let key = "item_" + day.format("YYYYMMDD");
          if (!result[date]) result[date] = { date, records: [] };
          result[date].records.push(item);
        });
        timelineData.value = result;
      } else {
        timelineData.value = {};
      }
    })
    .catch((error) => {});
};

const isLoading = ref(false);
const editedItem = ref(null);
const showEditor = ref(false);
const handleEdit = (item) => {
  editedItem.value = JSON.parse(JSON.stringify(item));
  showEditor.value = true;
};
const saveEdit = () => {
  isLoading.value = true;
  axios
    .post("api/journal_cxo.php?method=edit", editedItem.value)
    .then(() => {
      handleQuery();
      editedItem.value = null;
      showEditor.value = false;
      ElMessage({
        type: "success",
        message: "状态已保存",
      });
    })
    .finally(() => {
      isLoading.value = false;
    });
};
const cancelEdit = () => {
  editedItem.value = null;
  showEditor.value = false;
};
</script>

<style scoped>
.timeline-container {
  padding: 16px;
}
</style>
